<template>
  <div class="wxGroup">
    <div class="wx-group-box">
      <div class="qr-aside-top">
        <el-button size="mini" type="primary" @click="createGroup">新建分组</el-button>
      </div>

      <el-menu :default-active="index" class="group-menu-vertical overflow_y" @select="selectGroup">
        <el-menu-item index="e_-1">
          <div class="name">默认分组</div>
        </el-menu-item>
        <el-menu-item :index="'e_'+i" v-for="(e,i) in groups" :key="i">
          <div class="wx-group-item">
            <wx-tooltip class="name">
              {{ e.name || e.groupName }}
            </wx-tooltip>
            <div v-if="i === current">
              <el-dropdown @command="openRenamePopup" :show-timeout="100">
                <i class="el-icon-more drop-icon"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="'r_'+i">重命名分组</el-dropdown-item>
                  <el-dropdown-item :command="'d_'+i">
                    <template>
                      <el-link :underline="false" type="danger">删除分组</el-link>
                    </template>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-menu-item>
      </el-menu>

      <el-dialog custom-class="dialog-middle" :title="dialogTitle"
                 :close-on-click-modal="false"
                 :visible.sync="editGroupdialog" width="30%" top="30vh">
        <el-input v-model="changeName" placeholder="请输入分组名称" maxlength="15"
                  show-word-limit></el-input>
        <wx-link v-if="dialogErr" class="err-text">请输入分组名称</wx-link>
        <span slot="footer" class="dialog-footer">
        <el-button @click="editPopupCancel">取 消</el-button>
        <el-button type="primary" @click="groupRename">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import WxTooltip from "@/components/wxqy/wxTooltip/wxTooltip";
import WxLink from "@/components/wxqy/wxLink/wxLink";

export default {
  name: "wxGroup",
  components: {WxLink, WxTooltip},
  // goup list , 删除操作, 重命名, 选择操作
  props: ['wxGroup', 'delGroup', 'rename', 'select'],
  data() {
    return {
      dialogTitle: '修改分组',
      dialogErr: false,
      editGroupdialog: false,
      groups: this.wxGroup,
      changeName: null,
      changeGroup: null,
      index: '0',
      current: -1
    }
  },
  watch: {
    wxGroup: function (v) {
      this.groups = v
    }
  },
  methods: {
    eSplite(e) {
      let t = e.split('_')
      return {type: t[0], index: parseInt(t[1])}
    },
    openRenamePopup(e) {
      let {type, index} = this.eSplite(e)
      let current = this.groups[index]
      if (type === 'r') {
        this.dialogTitle = '修改分组'
        this.changeGroup = current
        this.changeName = current.name || current.groupName
        this.editGroupdialog = true
      } else {
        this.$confirm(`删除分组「${current.name || current.groupName}」，是否继续`,
          '删除', {
            onfirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
          this.groupDelete(current)
        })
      }
    },
    editPopupCancel() {
      this.changeName = null
      this.changeGroup = null
      this.editGroupdialog = false
    },
    groupDelete(row) {
      if (this.delGroup) {
        this.delGroup(row)
      }
    },
    groupRename() {
      if (this.changeName) {
        if (this.rename) {
          let newGroup = Object.assign({}, this.changeGroup)
          newGroup.name = this.changeName
          this.rename(newGroup)
        }
        this.editPopupCancel()
      } else {
        this.dialogErr = true
      }
    },
    selectGroup(e) {
      let {type, index} = this.eSplite(e)
      this.current = index
      let id = this.current > -1 ? this.groups[index].id : 0
      if (this.index === e) {
        this.index = '-1'
        this.current = -1
        id = -1
      } else {
        this.index = e
      }
      if (this.select) {
        this.select(id)
      }
    },
    createGroup() {
      this.changeName = ''
      this.dialogTitle = '新增分组'
      this.editGroupdialog = true
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/common";

.wxGroup {
  height: calc(100vh - 100px);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background-color: #fff;

  .wx-group-box {
    height: 100%;
    padding: 0 10px;
    margin: 12px 0;
  }

  .qr-aside-top {
    text-align: center;
    margin-bottom: 6px;
    line-height: 40px;

    .el-button {
      width: 80%;
    }
  }
}

.group-menu-vertical {
  border-right: none;
  overflow-y: auto;
  height: calc(100% - 76px);

  .el-menu-item {
    line-height: 45px;
    height: 45px;
    padding: 0 4px 0 6px !important;

    .name {
      margin-left: 10px;
    }
  }
}

.wx-group-item {
  @include flex-between;
  border-top: 1px solid rgba(0, 0, 0, .1);

  .drop-icon {
    font-size: 8px;
  }
}

.err-text {
  font-size: 12px;
  color: #f36868;
}
</style>
